import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {getRealSize} from '../utils';
import Icon from 'react-native-vector-icons/FontAwesome';
import PropTypes from 'prop-types';
import StarRating from 'react-native-star-rating';

export default class Rate extends React.Component {
  static propTypes = {
    score: PropTypes.number,
    unit: PropTypes.string,
    color: PropTypes.string,
    readOnly: PropTypes.bool,
    onChange: PropTypes.func,
    starStyle: PropTypes.object,
    size: PropTypes.number,
  };
  static defaultProps = {
    size: 14,
    score: 0,
    color: null,
    onChange: () => {},
    readOnly: false,
    starStyle: {},
  };

  onChange = score => {
    const {readOnly, onChange} = this.props;
    if (!readOnly) {
      onChange(score);
    }
  };

  render() {
    const {color, score, size, readOnly, starStyle} = this.props;
    return (
      <View style={Styles.container}>
        <StarRating
          disabled={readOnly}
          maxStars={5}
          rating={score}
          selectedStar={this.onChange}
          emptyStarColor="#c6c6c6"
          fullStarColor="#F2A22B"
          halfStarColor="#F2A22B"
          halfStarEnabled={false}
          starSize={size}
          starStyle={starStyle}
        />
        <Text style={[Styles.label, color && {color: '#F2A22B'}]}>{score}</Text>
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  label: {
    marginLeft: getRealSize(8),
    fontSize: getRealSize(16),
    fontWeight: 'bold',
    color: '#F2A22B',
  },
});
